<template>
  <div>
    <div class="container">
      <div class="login-box">
        <h2>管理系统测试123master</h2>
        <p>欢迎登录</p>
        <el-form :model="form" ref="formref" style="width: 100%;" :rules="rules" label-width="80px">
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号" />
          </el-form-item>
          <p>欢迎光临</p>
          <p>下次光临</p>
          <p>master</p>
          <p>dev</p>
          <p>master2</p>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" type="password" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="form.code" placeholder="请输入密码" style="width: 70%;height: 30px;" />
            <div style="height: 30px;width: 20%;display: flex; justify-content: flex-end;">
              <img :src="codeUrl" class="img" @click="getCode" v-if="codeUrl" style="height: 30px;" />
              <span v-else>丢失验证码</span>
            </div>
          </el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { getCodeImg } from "@/api/login.js";
import { useUserStore } from "@/stores/user.js";
import { usePermissionStore } from "@/stores/permission.js";
const formref = ref(null)
const form = ref({
  username: 'admin',
  password: 'admin123',
  code: '',
  uuid: "",
})
const redirect = ref('')
const imgvalue = ref(true)
const codeUrl = ref('')
const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
  ]
}
const route = useRoute()
const router = useRouter()
const onSubmit = () => {
  formref.value.validate((valid) => {
    if (valid) {
      useUserStore().login(form.value).then(res => {
        const query = route.query;
        const otheroarans = Object.keys(query).reduce((acc, cur) => {
          if (cur !== 'redirect') {
            acc[cur] = query[cur];
          }
          return acc;
        }, {})
        if (redirect.value) {
          console.log('走哪边');

          router.push({ path: redirect.value, query: otheroarans });
        } else {

          router.push({ path: "/", query: otheroarans });
        }

      }).catch(err => {
        getCode
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const getCode = () => {
  getCodeImg().then(res => {
    imgvalue.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
    if (imgvalue.value) {
      codeUrl.value = "data:image/gif;base64," + res.img;
      form.value.uuid = res.uuid;
    }
  })
}
watch(route, (newRoute) => {
  console.log(newRoute, '我拉监听路由');

  redirect.value = newRoute.query && newRoute.query.redirect;

}, { immediate: true });


onMounted(() => {
  getCode()
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: url(../assets//img/bg.jpg) no-repeat;
  background-size: cover;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-box {
    width: 600px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px) brightness(94%);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    text-align: center;
    padding: 10px;


  }

}
</style>